<template>
  <el-descriptions class="p-3"
                   :column="1"
                   direction="vertical"
                   size="medium">
    <el-descriptions-item v-for="item in columns"
                          :key="`columns-${item.id}`"
                          :label="item.colName">{{ datasource[item.colCode] || "--" }}</el-descriptions-item>
  </el-descriptions>
</template>

<script lang="ts">
  import { Component, Prop, Vue, Watch } from "@some21/vue-class-decorator";
  import { getTaskExtInfo } from "../../../apis/Layout";

  @Component({
    name: "Blocks-TaskExtInfoBlock",
  })
  export default class extends Vue {
    // 扩展信息ID
    @Prop({ required: true })
    extId: any;
    // 任务的数据ID
    @Prop({ required: true })
    dataId: any;
    // 列的配置
    @Prop({ type: Array, required: true })
    columns: any[];

    datasource = {};
    loading = true;

    @Watch("dataId")
    onDataIdChange() {
      this.loadData();
    }
    created() {
      this.loadData();
    }
    async loadData() {
      this.loading = true;
      try {
        const { data } = await getTaskExtInfo(this.extId, this.dataId);

        this.datasource = data;
      } finally {
        this.loading = false;
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
